<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <script>
        var socket;
        if(window.WebSocket){
            /*
            * ws  就是webSocket长连接
            * */
            socket = new WebSocket("ws://localhost:7000/hello");
            // 相当于channel   ev 收到服务器端回送的消息
            socket.onmessage = function (ev){
                var rt = document.getElementById("responseText");
                rt.value = rt.value+"\n"+ev.data;
            }

            // 相当于连接开启  感知到连接开启
            socket.onopen = function(ev){
                var rt = document.getElementById("responseText");
                rt.value ="连接开启了..."
            }

            // 连接关闭
            socket.onclose = function (ev) {
                var rt = document.getElementById("responseText");
                rt.value =rt.value+"\n"+"连接关闭.....";
            }
        }else {
            alert("当前浏览器不支持webSocket")
        }

        // 发送消息到服务器
        function send(message){
            if(!window.socket){
                return;
            }
            if(socket.readyState == WebSocket.OPEN){
                // 通过socket发送消息
                socket.send(message);
            } else{
                alert("连接没有开启")
            }

        }

    </script>

    <form onsubmit="return false">
        <textarea name="message" id = "message" style ="height: 300px; width: 300px" ></textarea>
        <input type="button" value="发送消息" onclick="send(this.form.message.value)">
        <textarea id="responseText" style ="height: 300px; width: 300px" ></textarea>
        <input type="button" value="清空内容" onclick="document.getElementById('responseText').value=''">
    </form>
</body>
</html>